<!--
 * @Author: your name
 * @Date: 2021-08-18 15:37:22
 * @LastEditTime: 2021-08-19 12:03:00
 * @LastEditors: Please set LastEditors
 * @Description: 网易严选-人气推荐
 * @FilePath: \代码\day03\网易严选-人气推荐.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易严选-人气推荐</title>
    <!-- 外部样式表 -->
    <!-- <link rel="stylesheet" href="style.css"> -->
    <!-- 内部样式表 -->
    <style>
        html,body {
            margin: 0px;
            padding: 0px;
            width: 1263px;
        }

        /* 选择器 */
        .popularity {
            margin:50px 0px 50px 0px;
            height: 738px;
            background-color: #f4f0ea;
        }

        .header {
            margin-top: 50px;
            padding-top: 50px;
            height: 60px;
        }
        
        .header>.name {
            /* 外边距margin:上、右、下、左 */
            margin: 0px 20px 0px 100px;  
            /* 上内边距padding: */
            padding-top: 0px;
            font-size: 28px;
            display: inline-block;
        }
        /* 光标悬浮上去 */
        .header>.name:hover {
            /* 字体变色 */
            color: #b4a078;
            /* 鼠标样式：悬浮上去变成小手 */
            cursor: pointer;
            /* 将该h3元素设置为行内块元素 */
        }

        .header>.headerLeft {
            display: inline-block;
            margin:0px 20px 0px 20px;
            padding: 0px 5px 0px 5px;
            font-size: 14px;
        }
        .headerLeft:hover {
            color: #b4a078;
            cursor: pointer;
        }
        .checked {
            color: #b4a078;
            border-bottom: 2px solid #b4a078;
        }

        .headerRight {
            display: inline;
            font-size: 14px;
            float: right;
            margin-top: 10px;
            margin-right: 80px;
        }
        .headerRight:hover {
            color: #b4a078;
            cursor: pointer;
        }

        .content {
            margin-left:100px;
        }
        
        .box {
            width: 223px;
            height: 285px;
            background-color: white;
            float: left;
            margin-left: 10px;
        }
        #box_1 {
            width: 390px;
            height: 580px;
            margin-left:0px;
        }
        .box:nth-child(5),
        .box:nth-child(6),
        .box:nth-child(7)
        {
            margin-top: 10px;
        }

        .box>img {
            width: 170px;
            height: 170px;
            margin:0px 22px;
        }
        .box>img:hover {
            cursor: pointer;
            width: 200px;
            height: 200px;
        }
        .box:nth-child(1)>img {
            width: 320px;
            height: 320px;
            margin: 40px 35px;
        }
        .box:nth-child(1)>img:hover {
            cursor: pointer;
            width: 340px;
            height: 340px;
        }
        
        .title {
            width: 100%;
            text-align: center;
            font-size: 15px;
            font-family: '黑体' '微软雅黑';
            /* 上边框 */
            border-top: 1px solid #f4f0ea;
        }
        .title:hover {
            cursor: pointer;
            color: #b4a078;
        }
        #titleFirst {
            font-size: 18px;
        }
        .title>h4,h5 {
            width: 200px;
        }
        .title>h4 {
            margin: 10px 95px;
        }
        .title>h5 {
            margin:10px 11px;
            width:201px;
        }
        .box:nth-child(3) h5 {
            margin-top:30px;
            padding-top: 5px;
        } 

        .label {
            font-size: 12px;
            text-align: center;
            margin: 10px 90px;
            height: 20px;
            width: 44px;
            line-height: 20px;
            background-color: #e36844;
            color: white;
        }
        #labelFirst {
            margin:10px 173px;
        }
        .box:nth-child(5) .label,
        .box:nth-child(6) .label,
        .box:nth-child(7) .label {
            width: 35px;
        }

        .price {
            color: #d4282d;
            font-size: 15px;
            display: inline-block;
        }
        #priceFirst {
            font-size: 20px;
        }
        
        .pricePri {
            display: inline-block;
            font-size: 13px;
            color: #999;
            text-decoration-line:line-through;
            text-decoration-color: #999;
        }

    </style>
</head>
<body>
    <!-- 行内样式 -->
    <div class="popularity">
        <div class="header">
            <h3 class="name">人气推荐</h3>
            <div class="headerLeft checked">编辑推荐</div>    
            <div class="headerLeft headerLeftR">热销总榜</div>    
            <div class="headerRight">更多推荐 ></div>
        </div>
        <div class="content">
            <div id=box_1 class="box">
                <img src="https://yanxuan-item.nosdn.127.net/6b9d93eae44995e560bcaf9154becee4.png?type=webp&quality=95&thumbnail=320x320&imageView" alt="">
                <div id="titleFirst" class="title">
                    <div id="labelFirst" class="label">99选9</div>
                    <h4>惊喜藏在蛋黄里，翻砂卤蛋 245克</h4>
                    <div id="priceFirst" class="price">¥18</div>
                </div>
            </div>
            <div class="box">
                <img src="https://yanxuan-item.nosdn.127.net/e3fdeaf58254e6016666f560347dbe56.png?type=webp&quality=95&thumbnail=180y180&imageView" alt="">
                <div class="title">
                    <div class="label">99选9</div>
                    <h5>红杏干 180克</h5>
                    <div class="price">¥20</div>
                </div>
            </div>
            <div class="box">
                <img src="https://yanxuan-item.nosdn.127.net/2ef1049164f5de76f3447c7300f285ed.png?type=webp&quality=95&thumbnail=180y180&imageView" alt="">
                <div class="title">
                    <h5>含40%散养鸡蛋，芝士蛋糕 800克</h5>
                    <div class="price">¥49</div>
                </div>
            </div>
            <div class="box">
                <img src="https://yanxuan-item.nosdn.127.net/55f4fcc2773ac277d0c84138e9b7489b.png?type=webp&quality=95&thumbnail=180y180&imageView" alt="">
                <div class="title">
                    <div class="label">99选9</div>
                    <h5>无添加蔗糖，澳洲进口即食燕麦片 1千克</h5>
                    <div class="price">¥19</div>
                </div>
            </div>
            <div class="box">
                <img src="https://yanxuan-item.nosdn.127.net/2c0147161faaa160cf10b6770f1e290d.png?type=webp&quality=95&thumbnail=180y180&imageView" alt="">
                <div class="upTitle">
                    <div class="upTitleTime"></div>
                </div>
                <div class="title">
                    <div class="label">特价</div>
                    <h5>清新英国梨香 强力去污酵素洗衣液3kg/1kg</h5>
                    <div class="price">¥29.9</div>
                    <div class="pricePri">¥35</div>
                </div>
            </div>
            <div class="box">
                <img src="https://yanxuan-item.nosdn.127.net/6044c806cf07f0a0f427ea001b3cb68c.png?type=webp&quality=95&thumbnail=180y180&imageView" alt="">
                <div class="title">
                    <div class="label">特价</div>
                    <h5>意面革命，好吃不胖，3分钟即食番茄肉酱面</h5>
                    <div class="price">¥16.8</div>
                    <div class="pricePri">¥19</div>
                </div>
            </div>
            <div class="box">
                <img src="https://yanxuan-item.nosdn.127.net/38779b7e649b2e02f2a689bff17cbc42.png?type=webp&quality=95&thumbnail=180y180&imageView" alt="">
                <div class="title">
                    <div class="label">特价</div>
                    <h5>封存鲜果的艺术品，鲜果冻 30克*10颗</h5>
                    <div class="price">¥19.9</div>
                    <div class="pricePri">¥23</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
